<div class="reading-left-images" style="opacity: 0;">
	{{#each comics}}
	<div class="reading-left r-l-i{{index}}" onclick="{{#unless folder}}reading.goToImage({{index}}){{else}}reading.goToFolder({{index}}){{/unless}}">
		<div class="reading-number">{{index}}</div>
		{{#if folder}}
		<i class="material-icon">folder</i>
		{{else}}
		<div class="reading-images">
			<img class="sha-image-{{sha}} index-image-{{index}}" data-index="{{index}}">
		</div>
		{{/if}}
	</div>
	{{/each}}
</div>
<div class="reading-page-range">
	<div class="simple-slider">
		<div class="simple-slider-text"><div class="range-percent"><i class="material-icon slider-reset" onclick="reading.goBackPageRangeHistory(this)">undo</i><span onclick="reading.goPageDialog()">0%</span></div><div onclick="reading.goPageDialog()"><span>1</span> / {{comics.length}}</div></div>
		<div class="range show-point-on-hover">
			<div class="range-position">
				<span class="range-line" style="width: 0%"></span>
				<span class="range-steps"></span>
				<div>
					<div class="range-point" position="100" style="left: 0%;"><div class="elevation-1"></div></div>
				</div>
			</div>
			<input type="range" max="{{comics.length}}" min="1" value="1" onrange="reading.pageRange(\{{value}}, \{{toEnd}})">
		</div>
	</div>
</div>